<template>
	<view>
		<!-- 老人信息 -->
		<view class="elder-data">
			<view>姓名：杨运英</view>
			<view>身份证号：123456009988771234</view>
		</view>
		<!-- 设备 -->
		<view class="device">
			<!-- 搜索设备 -->
			<view class="search">
				<u-search class="search-input" v-model="searchValue" placeholder="查找设备" @search="searchDevice"
					searchIconColor="#007aff" :show-action="false">
				</u-search>
				<text class="search-button" @click="clickSearch">搜索</text>
			</view>
			<!-- 设备列表 已绑定-->
			<uni-section class="device-group" title="已绑定的设备" type="line">
				<view class="device-list">
					<uni-list>
						<uni-swipe-action>
							<uni-swipe-action-item :right-options="swipeOptions" @click="openUnbindModal">
								<uni-list-item showArrow title="智能药盒2" rightText="查看/修改" note="" clickable
									@click="viewPillBox()" />
							</uni-swipe-action-item>
							<uni-swipe-action-item v-if="deviceList[0]" :right-options="swipeOptions"
								@click="openUnbindModal($event,deviceList[0])">
								<uni-list-item showArrow :title="deviceList[0].deviceName" rightText="查看/修改" note=""
									clickable @click="viewPillBox()" />
							</uni-swipe-action-item>
						</uni-swipe-action>
						<!-- 						<uni-list-item showArrow title="智能药盒" rightText="查看/修改" note="" clickable
							@click="viewPillBox()" /> -->
					</uni-list>
				</view>
			</uni-section>
			<!-- 解绑提示框 -->
			<u-modal :show="showUnbind" title="确认解除绑定吗?" :content="modalContent" showCancelButton
				@cancel="showUnbind=false" @confirm="unbindDeivce" confirmText="解绑" confirmColor="red"></u-modal>
			<!-- 换绑提示框 -->
<!-- 			<u-modal :show="showUpdate" title="确认更换绑定人吗?" :content="modalContent" showCancelButton
				@cancel="showUpdate=false" @confirm="updateBinding" confirmText="换绑" confirmColor="#007aff"></u-modal> -->
			<!-- 设备列表 未绑定-->
			<uni-section class="device-group" title="未绑定的设备" type="line">
				<view class="device-list">
					<uni-list>
						<uni-list-item showArrow title="血压监测仪" rightText="绑定" note="" />
						<uni-list-item showArrow title="血氧仪" rightText="绑定" note="" />
						<uni-list-item showArrow title="智能药盒" rightText="绑定" note="" clickable @click="bindPillBox()" />
					</uni-list>
				</view>
			</uni-section>
		</view>
		<view class="device-buttons">
			<button class="add" type="default" @click="addDeviceType()">
				<text>新增设备</text>
			</button>
			<button class="add" type="primary" @click="bindPillBox()">
				<text>绑定设备</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		unbindPillbox
	} from "../PillBox/api/pillbox.js";
	import {
		getDeviceList
	} from "./api/elder-device.js";
	export default {
		data() {
			return {
				searchValue: "",
				swipeOptions: [{
					text: '解绑',
					style: {
						fontSize: '14px',
						backgroundColor: '#F56C6C'
					}
				}, {
					text: '换绑',
					style: {
						fontSize: '14px',
						backgroundColor: '#007aff'
					}
				}, ],
				// 显示解绑modal
				showUnbind: false,
				showUpdate: false,
				modalContent: '',
				elderId: '2c773654facb11ec97eafa163eb546d6',
				// 设备列表，已绑定
				deviceList: [],
				// 正在解绑的设备id
				unbindId: ''
			}
		},
		onLoad() {
			this.initDeviceList()
		},
		methods: {
			searchDevice() {
				console.log("搜索设备", this.searchValue)
			},
			clickSearch() {
				console.log("点击了 搜索设备")
				this.searchDevice()
			},
			viewPillBox() {
				console.log("点击了 查看药盒")
				uni.navigateTo({
					url: '/pages/homepage/PillBox/index?uuid=2c773654facb11ec97eafa163eb546d6'
				})
			},
			// 跳转到绑定设备页面
			bindPillBox() {
				console.log("绑定药盒")
				uni.navigateTo({
					url: '/pages/homepage/PillBox/BindPillBox/index?elderName=杨运英&elderId=130926194003082428'
				})
			},
			addDeviceType() {
				console.log("新增设备")
				uni.navigateTo({
					url: '/pages/homepage/ElderDeviceList/AddDevice/addDevice'
				})
			},
			// modal 点击逻辑
			openUnbindModal(e, item) {
				console.log("e.id", e, item)
				if (e.content.text === "解绑") {
					console.log("点击了解绑")
					this.unbindId = item.id;
					this.showUnbind = true;
					this.modalContent = "正在解绑的设备: 智能药盒"; // 需要传入实际的设备名称
				} else if (e.content.text === "换绑") {
					console.log("点击了换绑")
					this.$tab.navigateTo(`/pages/homepage/ElderDeviceList/UpdateBinding/index?deviceId=${item.id}&deviceName=${item.deviceName}&deviceImei=${item.imei}`)
					// this.showUpdate = true;
					// this.modalContent = "正在换绑的设备: 智能药盒"; // 需要传入实际的设备名称
				}
			},
			// 解绑设备
			async unbindDeivce() {
				this.showUnbind = false;
				// const id = "db077f10e2894348a4556ecdbb371996"
				const id = this.unbindId;
				console.log("执行解除绑定，设备id:", id);
				const res = await unbindPillbox(id);
				console.log('res', res)
				uni.showToast({
					icon: 'none',
					title: res.msg,
					duration: 2000,
				})
			},
			// 换绑设备
			async updateBinding(){
				console.log("确认换绑,执行")
				this.$tab.navigateTo("/pages/homepage/ElderDeviceList/UpdateBinding/index")
			},
			// 获取设备列表
			async initDeviceList() {
				// const res = await getDeviceList(this.elderId);
				const res2 = await getDeviceList('2', '智能药盒'); // 只有id=2有效？？？？
				console.log('获取设备列表2', res2)
				this.deviceList = res2.data;
			}
		}
	}
</script>

<style>
	.elder-data {
		margin: 0 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #666;
	}

	.device {
		margin: 10px;
	}

	.search {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-button {
		/* width: 150rpx; */
		/* height: 100rpx; */
		font-size: 16px;
		margin-left: 20px;
		margin-right: 10px;
		color: #007aff;
	}

	.device-group {
		margin-top: 10px;
	}

	.device-list {
		/* margin: 0 10px; */
	}

	.device-buttons {
		width: 750rpx;
		position: fixed;
		bottom: 50px;
		left: 0;

		display: flex;
		flex-direction: row;
	}

	.add {
		width: 250rpx;
	}

	/* 	.add {
		position: fixed;
		bottom: 50px;
		left: 225rpx;
		width: 300rpx;
		border-radius: 50%;
	} */

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}
</style>